<template>
    <div class="search-index container">
        <Header></Header>
        <section>
            <div class="search-history" v-if="searchArr.length">
                <h2>
                    <i class="iconfont icon-shijian"></i>
                    <span></span>

                    <span class="lajitong" @click="deleteStorge">
                        <i class="iconfont icon-lajitong"></i></span>

                </h2>
                <ul>
                    <li v-for="(item, index) in searchArr" :key="index" @click="goSearchList(item)">{{ item }}</li>
                </ul>
                <h2>
                    <span class="hot">热门推荐</span>

                </h2>
                <ul>
                    <li v-for="(item, index) in hotArr" :key="index" @click="goHotList(item)">{{ item.name }}</li>
                </ul>
            </div>
            <div v-else>
                <van-empty image="search" description="没有搜索历史记录" />
            </div>
        </section>
        <Tabbar></Tabbar>
    </div>
</template>

<script>
import Header from '@/components/search/Header.vue';
import Tabbar from '@/components/common/Tabbar.vue';
import { Dialog } from 'vant';
export default {
    data() {
        return {
            searchArr: [],
            hotArr: [
                {
                    name: 'PRADA'
                },
                {
                    name: 'GUCCI'
                },
                {
                    name: 'DIOR'
                },
                {
                    name: 'CELINE'
                },
                {
                    name: 'COACH'
                },
                {
                    name: 'FENDI'
                }
            ]
        }
    },
    components: { Header, Tabbar },
    created() {
        this.searchArr = JSON.parse(localStorage.getItem('searchList')) || [];

    },
    methods: {
        deleteStorge() {
            Dialog.confirm({
                title: '提示',
                message: '您要删除记录吗？',
                theme: 'round-button',
                confirmButtonColor: '#1b1b1b',
                cancelButtonColor: '#ccc'
            }).then(res => {
                if (res == 'confirm') {
                    // 删除本地存储
                    localStorage.removeItem('searchList')
                    // 清除数据
                    this.searchArr = []
                }
            }).catch(() => { })
            // 加了catch就不报错 tmd！！！
        },
        //点击历史搜索，进入搜索界面
        goSearchList(item) {
            this.$router.push({
                name: 'lists',
                query: {
                    key: item
                }
            })
        },
        goHotList(item) {
            this.$router.push({
                name: 'lists',
                query: {
                    key: item.name
                }
            })
        }
    }
}
</script>

<style scoped>
    .search-index {
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    
    section {
        flex: 1;
        background-color: #f5f5f5;
        overflow: hidden;
    }
    
    .search-history h2 {
        position: relative;
        padding: 0.533333rem;
        font-weight: 400;
        font-size: 0.48rem;
    }
    
    .search-history h2 i {
        padding-right: 0.08rem;
        color: #1b1b1b;
        font-size: 0.68rem;
        font-weight: 800;
    }
    
    .lajitong {
        position: absolute;
        right: 0.533333rem;
    
    }
    
    .search-history ul {
        display: flex;
        flex-wrap: wrap;
        padding: 0 0.266666rem;
    }
    
    .search-history ul li {
        margin: 0.266666rem;
        padding: 0.18rem 0.46rem;
        font-size: 0.373333rem;
        border: 1px solid rgb(220, 219, 219);
        background-color: rgb(220, 219, 219);
    }
    
    .hot {
        font-weight: 550;
    }
    </style>